<template>
    <div class="single-item" :key="index">
      <div class="single-item-header d-flex justify-content-between">
        <div class="d-flex align-items-center gap-4">
          <span>订单：{{ item.orderId }}</span>
          <span>状态：{{ item.status }}</span>
          <span>日期：{{ item.date }}</span>
        </div>
        <span>合计：￥{{ item.total }}</span>
      </div>
      <div class="single-item-body">
        <div class="single-item-body-item d-flex align-items-center justify-content-between mt-2" v-for="(product, index) in item.products" :key="index">
          <img :src="product.image" alt="">
          <span>{{ product.name }}</span>
          <span>{{ product.quantity }} x {{ product.price }}</span>
          <span>￥ {{ product.total }}</span>
        </div>
      </div>
      <div class="single-item-footer d-flex justify-content-end">
        <span class="look" @click="viewOrder(item)">查看</span>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      item: {
        type: Object,
        required: true
      },
      index: {
        type: Number,
        required: true
      }
    },
    methods: {
      viewOrder(item) {
        this.$emit('view-order', item);
      }
    }
  };
  </script>

<style scoped>
.single-item {
  color: #303133;
}
  .single-item-header {
    padding: .6rem 2rem;
    border-top: 1px solid rgba(0, 0, 0, .15);
}

.single-item-body img {
    width: 90px;
    height: 90px;
}

.single-item-body {
    border-top: 1px solid rgba(0, 0, 0, .15);
    border-bottom: 1px solid rgba(0, 0, 0, .15);
}

.single-item-body-item {
    padding-left: 2rem;
    padding-right: 2rem;
}

.single-item-footer {
    padding: .4rem 2rem;
}

.single-item-footer .look {
    color: white;
    background: rgba(255, 144, 3);
    height: 21px;
    width: 42px;
    text-align: center;
    line-height: 21px;
    font-size: 16px;
    cursor: pointer;
}
</style>